<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型卡片布局</title>
		<style>
			/* css 样式思路：
			   1.通配选择器：微软雅黑、#f5f5f5 浅灰、外边距至0
			   2.#product_card：边框、内边距、外边距、阴影【透明.1】、文字居中
			   3.img：边框倒角、内外边距？【微调】
			   4.h3：颜色、内外边距？【微调】
			   5.p：字体大小、颜色
			   6.p+span：span、内外边距？【微调】
			 */
			#product_card{
				width: 300px;
				height: 550px;
				background: #f5f5f5;
				border-top: 1px;
				border-radius: 5px;
				box-shadow: 1px 1px 5px 5px rgba(205, 205, 205, 0.5);
			}
			img{
				border-radius: 30px;
				padding: 20px 25px 20px;
			}
			h3{
				border-top-color: #000000;
				text-align: center;
			}
			p{
				color: #d90000;
				text-align: center;
			}
			#p1{
				color: #9d9d9d;
				text-align: center;
			}
			/* 搜索 */
			#card{
				margin-top: 100px;
				width: 300px;
				height: 50px;
				border: 1px solid #cbcbcb;
				box-shadow: 1px 1px 5px 5px #d4d4d4;
				border-radius: 5px;
			}
			#commodity{
				margin-left: -150px;
				color: #c1c1c1;
			}
			#rectangle{
				position: relative;
				background-color: red;
				top: -50px;
				height: 37px;
				width: 70px;
				margin-left: 200px;
				border-radius: 5px;
			}
			#search{
				color: white;
				text-align: center;
		
			}
			
		</style>
	</head>
	<body>
		<!-- 网页：1.html 结构【原生图分析】 -->
		<div id="product_card">
			<img src="img/小米su7.jpg" width="249px" height="350px" alt="汽车">
			<h3>小米SU7</h3>
			<p>￥279999.00</p>
			<p id="p1">已有<span>10万+</span>评价</p>
		</div>
		
		<div id="card">
		<p id="commodity">搜索 京东商品</p >
		<div id="rectangle"><h3 id="search">搜索</h3></div>
		</div>
	</body>
</html>